iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 12
1
自我挑戰組

三十天用Vue.jS打造一個網路商城系列 第 12

Day12:安裝axios和vue-axios並使用AJAX

  • 分享至 

  • xImage
  •  

閱讀前,建議可以參考Day1:閱讀指南&為何選擇這個題目?

▌挑戰簡介

  • 題目:三十天用Vue.jS打造一個網路商城

  • 挑戰內容:利用慕課網(IMOOC)的「Vue2.0+Node.js+MongoDB 全棧打造商城系統」&六角學院的「Vue出一個電商網站」的課程嘗試在30天內打造網路商城。

  • 本篇性質:純粹學習進度的紀錄,不會有詳細的教學或解釋,因此不適合認真閱讀

▌目標

安裝axios和vue-axios

▌安裝與環境配置

  • 參考vue-axios的文件:https://www.npmjs.com/package/vue-axios
  • 要先配置好Vue-cli還有router環境 vue init webpack
  • 安裝axios和vue-axios
npm install --save axios vue-axios  //要用save才能存到json檔案
  • 要去index.js當中啟用
import vue from vue
import vueaxios from vue-axios
import axios from axios
vue.use(axios,vueaxios)

▌使用AJAX

去app.vue使用AJAX,使用 this.$http.get(api).then(response => { console.log(response);});

<script>
export default {
  name: "App",
  created() {
    const api = `//api網址`;
    this.$http.get(api).then(response => {
      console.log(response);
    });
  }
};
</script>

▌心得

這是第二次遇到axios的使用,還蠻興奮的(興奮什麼XD


上一篇
Day11:如何不用router link改用Method切換路徑?
下一篇
Day13:設定config檔案
系列文
三十天用Vue.jS打造一個網路商城30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言